<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>练习</title>

	<style type="text/css">
	.far{
		width: 1000px;
		height: 200px;
		background: red url() 0 0 no-repeat;
	}
	.son{
		width: 200px;
		height: 200px;
		background: yellow url() 0 0 no-repeat;
		float: left;
		margin-left: 20px;
	}
	.smallson{
		width: 80px;
		height: 80px;
		background: green url() 0 0 no-repeat;
		
		margin-left: 20px;
	}

	.smallbox{
		width: 50px;
		height: 50px;
		background: blue url() 0 0 no-repeat;
		position: fixed;
		right:20px;
		bottom: 20px;
		display: none;
		
		
	}
	.underbox{
		width: 50px;
		height: 50px;
		background: orange url() 0 0 no-repeat;
	}





	body{
		height: 2000px;
	}

	</style>
</head>
<body>
	<div class="far">
		<div class="son"></div>
		<div class="son"><div class="smallson"></div></div>
		<div class="son"></div>
		<div class="son"></div>
	</div>
	<div class="underbox"></div>



	<div class="smallbox"></div>	<!-- 右下角的蓝色盒子 -->
	<div id="p"></div>






	<script type="text/javascript">
	window.onscroll=function(argument){
		bodytop=document.documentElement.scrollTop;
		document.title=bodytop;
		if (bodytop>500){
			smallbox=document.getElementsByClassName("smallbox")
			smallbox[0].style.display="block";
		}else{
			smallbox[0].style.display="none";
		}
	};

	smallbox=document.getElementsByClassName("smallbox");
	smallbox[0].onclick=function(){
		document.documentElement.scrollTop=0;
		// 如果是谷歌浏览器则写document.body.scrollTop=0;
	}


	// underbox=document.getElementsByClassName("underbox")
	// son=document.getElementsByClassName("son")
	// underboxclone=underbox[0].cloneNode();
	// // 创建underbox的副本
	// underbox[0].onclick=function(){
	// 	son[1].appendChild(underboxclone)
	// }

	underbox=document.getElementsByClassName("underbox")
	son=document.getElementsByClassName("son")
	smallson=document.getElementsByClassName("smallson")
	underboxclone=underbox[0].cloneNode();
	// 创建underbox的副本
	underbox[0].onclick=function(){
		son[1].insertBefore(pk,smallson[0])
	}
	


	pk=document.createElement('p');
	// 创建一个新的节点后面括号里是标签名
	pk.style.width="20px";
	pk.style.height="20px";
	pk.style.background="blue";










	





	</script>
</body>
</html>